<template>
  <div class="home-box">  
    
    <!-- 搜索 -->
    <search> </search>

    <!-- 首页头部导航 -->
    <div class="home-head">
      <ul class="van-clearfix">
        <li class="home-nav underlinecolor" v-for="(item, index) in navitem" :key="index" @click="navtab(index)" >
          <span :class="{ underlinecolor: navindex == index }"> {{ item }}</span>
          <p :class="{ underline: navindex == index }"></p>
        </li>
      </ul>
    </div>
    <!-- end -->

    <!-- 二级路由 -->
    <div>
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
import search from '../../components/home/search'
export default {
  components:{
    search
  },
  data() {
    return {
      value:null,
      navitem: ["首页", "今日推荐", "捡漏专区", "人气榜单", "时尚套装"],
      navindex: 0,
    };
  },
  methods: {
    navtab(index) {
      console.log(index);
      this.navindex = index;
      //根据索引 来确定路由
      if (this.navindex == 0) {
        this.$router.push("/home/index").catch((err) => {});
      } else if (this.navindex == 1) {
        this.$router.push("/home/recommend").catch((err) => {});
      } else if (this.navindex == 2) {
        this.$router.push("/home/inexpensive").catch((err) => {});
      } else if (this.navindex == 3) {
        this.$router.push("/home/popularityList").catch((err) => {});
      } else if (this.navindex == 4) {
        this.$router.push("/home/fashion").catch((err) => {});
      } else {
        console.log(111)
      }
    },
  },
};

</script>

<style lang="less" scoped>
.home-box {
  // 首页头部导航
  .home-head {
    .home-nav {
      border: 1px #c62724 solid;
      background-color: #c62724;
      padding-top: 15px;
      padding-bottom: 25px;
      text-align: center;
      float: left;
      width: 20%;
      height: 90px;
      color: #f2dbdb;
      font-size: 28px;
      padding-right: 20px;
    }
  }
  

}

.underlinecolor {
  color: #fbf1f1;
  font-size: 29px;
}
.underline {
  margin-top: 6px;
  margin-left: 45px;
  text-align: center;
  border-radius: 10px;
  height: 0px;
  width: 35px;
  background-color: #fbf1f1;
  border: 3px #fbf1f1 solid;
}
</style>
